<template>
        <div class="flex-box" >
        <heads title="发布" @submit="fabu" :showStatus="true" showTitle="发布"></heads>
        <div  style="display: flex;flex-direction: column; " class="flex-item">
            <scroller :lockX=true>
                <div  >
                    <group gutter="0">
                        <popup-radio :options="list"  placeholder="请选择" v-model="article_type" title="类型"></popup-radio>
                        <x-input placeholder="标题"  v-model="title"></x-input>
                        <x-textarea placeholder="尽情发挥吧"  autosize  v-model= "content" :height="400"></x-textarea>
                    </group>

                </div>
            </scroller>
            <toast v-model="showPositionValue" :time="1000"  width="14.6em" :type="type" is-show-mask :text="message" :position="position"></toast>
        </div>

    </div>
</template>

<script>
    import  heads from  "../header";
    import {XInput,XTextarea,Group,Scroller,XHeader,ViewBox,PopupRadio,Toast} from 'vux';
    import  foots from  '../footer';
    export default {
        name: "articles",
        data(){
            return {
                title:'',
                content:'',
                list:[],
                article_type:'',
                showPositionValue:false,
                message:null,
                type:'success',
                position:'middle',
            }
        },
        components:{
            Scroller,
            heads,
            XInput,
            XTextarea,
            Group,
            foots,
            ViewBox,
            PopupRadio,
            Toast
        },
        methods:{
            open_soft_keyboard(options){
                if(plus.os.name == 'iOS'){
                    setTimeout(function(){
                        var wv_current = plus.webview.currentWebview().nativeInstanceObject();
                        wv_current.plusCallMethod({"setKeyboardDisplayRequiresUserAction":false});
                        document.querySelector(options['input']).focus();
                    }, 330);
                }else{
                    // 因为安卓autofocus只有4.0版本以上才支持，所以这里使用native.js来强制弹出
                    setTimeout(function(){
                        // 在执行的时候需要让当前webview获取焦点
                        var wv_current = plus.android.currentWebview();
                        plus.android.importClass(wv_current);
                        wv_current.requestFocus();

                        var Context = plus.android.importClass("android.content.Context");
                        var InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
                        var main = plus.android.runtimeMainActivity();
                        var imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
                        imm.toggleSoftInput(0,InputMethodManager.SHOW_FORCED);
                        document.querySelector(options['input']).focus();
                    }, 330);
                }
            },
            fabu(){
                var _this=this;
                this.$axios.post(this.$axios.defaults.baseURL+'addArticle',{
                    title:_this.title,
                    content:_this.content,
                    article_type_id:_this.article_type
                }).then(function (res) {
                    _this.message=res.data.msg;
                    _this.showPositionValue=true;
                    if(res.data.state==true){
                        _this.type='success';
                        _this.title=null
                        _this.content=null
                    }  else {
                        _this.type='warn'
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            getArticleType(){
                var _this=this;

                this.$axios.get(this.$axios.defaults.baseURL+'articleType',{
                    params:{}
                }).then(function (res) {
                    var arr=[];
                    if(res.data.state==true){
                        for(var i=0;i<res.data.data.length;i++){
                            var a=[];
                            a['value']=res.data.data[i].title
                            a['key']=res.data.data[i].id;
                            arr[i]=a;
                        }
                        _this.list=arr;
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            }
        },
        activated() {
            if(window.plus) {
                this.open_soft_keyboard({
                    input: "input"
                });
            } else {
                document.addEventListener("plusready", function () {
                    this.open_soft_keyboard({
                        input: "input"
                    });
                }, false);
            }

                this.getArticleType()
        }


    }
</script>

<style lang="less" scoped>
    @import "../../assets/css/comm";
</style>